<template>
    <el-container>
        <el-header>
            <el-input prefix-icon="el-icon-search" placeholder="通过标题搜索该分类下的博客" size="mini"
                      v-model="keywords"></el-input>
            <el-button type="primary" size="mini" prefix="el-icon-search" @click="searchArticle">搜索</el-button>
        </el-header>
        <el-main>
            <el-table :data="articles" v-loading="loading" @selection-change="(selection)=>this.selections=selection">
                <el-table-column type="selection" v-if="showDelete(tabIndex)"></el-table-column>
                <el-table-column label="标题" prop="title" min-width="400">
                    <span slot-scope="scope" class="title"
                          @click="goToArticleDetails(scope.row.id)">{{scope.row.title}}</span>
                </el-table-column>
                <el-table-column label="最近编辑时间" prop="editTime" width="150">
                    <template slot-scope="scope">{{scope.row.editTime | formatDateTime}}</template>
                </el-table-column>
                <el-table-column label="作者" prop="userNickName" width="120"></el-table-column>
                <el-table-column label="所属分类" prop="categoryName" width="120"></el-table-column>
                <el-table-column label="操作" width="150" v-if="tabIndex !== 0">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="editArticle(scope.row)"
                                   v-if="tabIndex === 1 || tabIndex === 2">编辑
                        </el-button>
                        <el-button size="mini" @click="restoreArticle(scope.row.id)" v-if="tabIndex === 3">还原
                        </el-button>
                        <el-button type="danger" size="mini" @click="showDeleteArticlePop(scope.row)"
                                   v-if="showDelete(tabIndex)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer v-if="this.articles.length>0" :class="{'el-footer-end' : !showDelete(tabIndex) }">
            <el-button type="danger" class="bulk-delete" :disabled="this.selections.length===0"
                       @click="showDeleteArticlesPop" v-if="showDelete(tabIndex)">
                批量删除
            </el-button>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="pageSize"
                    :total="totalCount"
                    @current-change="currentPage=>{
                        this.page=currentPage;
                        getArticles(currentPage);}">
            </el-pagination>
        </el-footer>
    </el-container>
</template>

<script>
    import {get} from "../utils/api";

    export default {
        data() {
            return {
                articles: [],
                loading: false,
                selections: [],
                totalCount: -1,
                pageSize: 6,
                keywords: '',
                page: 1,
            }
        },
        mounted() {
            this.getArticles(this.page);
            // 监听重新加载
            window.bus.$on('articleListReload', () => {
                this.getArticles(this.page);
            });
        },
        methods: {
            showDelete(tabIndex) {
                return tabIndex === 1 || tabIndex === 2 || tabIndex === 3 || tabIndex === 4
            },

            getArticles(page) {
                this.loading = true;
                let state = 0
                let url = '/article/all';
                if (this.tabIndex === 4) {
                    url = '/admin/article/all';
                    state = 2;
                }
                switch (this.tabIndex) {
                    case 0:
                        state = null;
                        break;
                    case 1:
                        state = 1;
                        break;
                    case 2:
                        state = 0;
                        break;
                    case 3:
                        state = 2;
                        break;
                }
                get(url, {state: state, keywords: this.keywords, page: page, pageCount: this.pageCount}).then(res => {
                    this.loading = false;
                    if (res.status === 0) {
                        this.articles = res.data;
                        this.totalCount = res.totalCount;
                    } else {
                        this.$message.error(res.msg);
                    }
                }).catch(_ => this.loading = false);
            },

            goToArticleDetails(articleId) {
                this.$router.replace({path: '/blogDetail', query: {articleId: articleId}});
            },

            searchArticle() {
                this.getArticles(1)
            },

            editArticle(article) {
                this.$router.push({path: '/editBlog', query: {id: article.id}});
            },
            restoreArticle(articleIds) {
                this.loading = true;
                get('/article/update', {articleIds: articleIds, state: 2}).then(res => {
                    this.loading = false;
                    if (res.status === 0) {
                        this.$message.success('还原成功');
                        window.bus.$emit('articleListReload'); // 发送所有列表都重新加载文章列表的消息
                    } else {
                        this.$message.error('还原成功');
                    }
                });
            },

            showDeleteArticlePop(article) {
                let msg = ''
                if (this.tabIndex === 1 || this.tabIndex === 4) {
                    msg = '文章\t' + article.title + '\t将被删除进回收站';
                } else {
                    msg = '文章\t' + article.title + '\t将被永久删除，是否继续？';
                }
                this.$confirm(msg, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteArticle(article.id);
                });
            },

            showDeleteArticlesPop() {
                let msg = ''
                if (this.tabIndex === 1 || this.tabIndex === 4) {
                    msg = '批量删除文章进回收站, 是否继续';
                } else {
                    msg = '批量永久删除文章, 是否继续?';
                }
                this.$confirm(msg, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let ids = [];
                    this.selections.forEach((item) => {
                        ids.push(item.id)
                    });
                    this.deleteArticle(ids.join(","));
                });
            },

            deleteArticle(articleIds) {
                let state = 0;
                let url = '/article/update';
                switch (this.tabIndex) {
                    case 1:
                        url = '/article/update';
                        state = 2;
                        break;
                    case 2:
                    case 3:
                        url = '/article/delete';
                        break;
                    case 4:
                        url = 'admin/article/delete';
                        break;
                }
                this.loading = true;
                get(url, {articleIds: articleIds, state: state}).then(res => {
                    this.loading = false;
                    if (res.status === 0) {
                        this.$message.success('删除成功');
                        window.bus.$emit('articleListReload'); // 发送所有列表都重新加载文章列表的消息
                    } else {
                        this.$message.error('删除失败');
                    }
                });
            },
        },
        props: {
            tabIndex: {
                type: Number,
                required: true
            },
        }
    }
</script>

<style scoped lang="stylus">
    .el-container {
        .el-header {
            display flex
            flex-direction row
            justify-content flex-start
            align-items center

            .el-input {
                width 400px
            }

            .el-button {
                margin-left 10px
            }
        }

        .el-main {

            .title {
                color #409eff
                cursor pointer
            }
        }

        .el-footer {
            display flex
            align-items center
            justify-content space-between
        }

        .el-footer-end {
            // 避免当不显示批量删除时分页跑到左边
            justify-content flex-end
        }
    }
</style>
